<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>权限</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="<%=basePath%>js/jquery-1.11.0.min.js"></script>
<script src="<%=basePath%>js/echarts.js"></script>
<script type="text/javascript" src="<%=path %>/lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="<%=path%>/lib/bootstrap/css/bootstrap.min.css" />
<!-- 图表 -->
<script src="<%=basePath%>js/dark.js"></script>
<!-- 图表主题 -->
</head>

<body data-target="#one" data-spy="scroll" style="overflow: hidden;">
	<style>
.span12>h2 {
	font-size: 30px;
}

.span12>h6 {
	font-size: 20px;
}

.span12>h6, .span12>h2 {
	/* text-align: center; */
}
</style>
	<div class="container" style="padding-bottom: 15px; margin-top: 0px;">
		<div class="row">
			<div class="span12" style="min-height: 200px;">
				<h2 style="padding: 3%;">收入支出</h2>
				
					
				
				<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
				<center>
					<select class="form-control" name="year">
						<option>2016</option>
						<option selected="selected">2017</option>
					</select>
					<div id="main" style="width: 1000px; height: 600px;"></div>
				</center>
				
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var count = 0;
		function init(annual){
			if(count==0){
				annual = ${annualStatements};
				count++;
			}
			var myChart = echarts.init(document.getElementById('main'));
			var income = [];	//收入
			var expend = [];	//支出
			var profit = [];	//利润
			for (var i = 0; i < annual.length; i++) {
				income.push(annual[i].income);
				expend.push(annual[i].expend);
				profit.push(annual[i].profit);
			}
			option = {
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						type : 'cross',
						crossStyle : {
							color : '#999'
						}
					}
				},
				toolbox : {
					feature : {
						dataView : {
							show : true,
							readOnly : false
						},
						magicType : {
							show : true,
							type : [ 'line', 'bar' ]
						},
						restore : {
							show : true
						},
						saveAsImage : {
							show : true
						}
					}
				},
				legend : {
					data : [ '收入', '支出', '利润' ]
				},
				xAxis : [ {
					type : 'category',
					data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
							'10月', '11月', '12月' ],
					axisPointer : {
						type : 'shadow'
					}
				} ],
				yAxis : [ {
					type : 'value',
					name : '利润(元)',
					min : 0,
					max : 100000,
					interval : 25000,
					axisLabel : {
						formatter : '{value}'
					}
				}, {
					type : 'value',
					name : '单位(元)',
					min : 0,
					max : 100000,
					interval : 25000,
					axisLabel : {
						formatter : '{value}'
					}
				} ],
				series : [
						{
							name : '收入',
							type : 'bar',
							data : income
						},
						{
							name : '支出',
							type : 'bar',
							data : expend
						},
						{
							name : '利润',
							type : 'line',
							yAxisIndex : 1,
							data : profit
						} ]
			};
			
			myChart.on('click',function(params){ // 控制台打印数据的名称 
				window.location.href="echartsTest/firstEcharts.html";	
			});
			
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}

		$(function(){
			init();
			$("select[name=year]").change(function(){
				var year = $(this).val();
				  $.ajax({
					type:"post",
					url:"findAnnualStatements.action",
					data:{"year":year},
					ansyc:false,
					complete:function(data){
							init(eval(data.responseText));
					}
				});  
			});
			
		});
	</script>



</body>
</html>
